<template>
  <div class="login-wrapper">
      <div class="login-title">Hello World!</div>
      <el-form :model="loginForm" :rules="rules" ref="formDataRef" label-width="120px">

          <el-form-item label="Username" prop="username">
              <el-input 
                placeholder="Please input username"
                v-model="loginForm.username" />
          </el-form-item>
          <el-form-item label="Password" prop="password">
              <el-input 
                v-model="loginForm.password"
                type="password"
                placeholder="Please input password"
                show-password
                autocomplete="off" />
          </el-form-item>

          <el-form-item label="VerifyCode" prop="verifyCode">
              <el-input 
                v-model="loginForm.verifyCode"
                placeholder="Please input verifyCode"
                autocomplete="off" />
              <img :src="generateCodeApi" @click="generateCode">
          </el-form-item>
          
          <el-form-item>
              <el-button type="primary" @click="onSubmit(ruleFormRef)">Submit</el-button>
          </el-form-item>
      </el-form>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import request from '@/utils/axios/request';
import { login } from '@/api/user';

const generateCodeApi = ref("api/checkCode?t=" + new Date().getTime());

const formDataRef = ref();


const loginForm = reactive({
  username: '',
  password: '',
  verifyCode: ''
})

const rules = {
  username: {
    required: true,
    message: "username is required"
  },
  password: {
    required: true, 
    message: 'password is required'
  },
  verifyCode: {
    required: true, 
    message: 'verifyCode is required'
  }
}



const onSubmit = () => {
  formDataRef.value.validate((valid) => {
    console.log(valid);
    if (valid) {
      console.info(valid);
      console.info(login);
      let res = login({
          account: loginForm.username, 
          password: loginForm.password,
          checkCode:loginForm.verifyCode,
      })
      console.info(res);
    }
  })
  console.log('submit!')
}

const generateCode = () => {
  generateCodeApi.value = "api/checkCode?t=" + new Date().getTime();
}


</script>

<style lang="scss" scoped>
//声明全局变量
$bg:#2d3a4b;
$dark_gray:#889aa4;
$light_gray:#eee;

</style>